<!-- 权限管理页面 -->
<div class="bg-light lter b-b wrapper-sm">
    <h1 class="m-n font-thin h4">权限管理</h1>
</div>
<div class="wrapper-sm" ng-controller="visualauthorizationManagentController">
    <div class="panel panel-default">
        <div class="panel-heading font-bold">权限树</div>
        <div class="wrapper-sm">
            <div class="form-group">
                <div class="swiper-container" ng-model="TreeData">
                    <div class="hbox ztree swiper-wrapper">

                        <!-- Swiper -->
                        <div class="w-lgss col swiper-slide" ng-repeat="clientTree in TreeData">
                            <div ui-tree data-drag-enabled="false" id="clientTree-root">
                                <ul ui-tree-nodes ng-model="clientTree" ng-class="{hidden: collapsed}">
                                    <li ng-repeat="node in clientTree.authorizationType track by $index" ng-if="$index==0" ui-tree-node>
                                        <a class="button level0 switch root_open" ng-if="clientTree.secAuthTypeList && clientTree.secAuthTypeList.length > 0" data-nodrag ng-click="toggle(this)">
                                            <span class="button level0 switch" ng-class="{
                                                'root_close': collapsed,
                                                'root_open': !collapsed
                                              }"></span></a>
                                        <a class="level1 AmarZ animated fadeInUp" ng-mouseover="selcZ=true" ng-mouseleave="selcZ=false">
                                            <span class="button treeMN" ng-class="{
                                                'ico_open': !collapsed,
                                                'ico_close': collapsed
                                              }"></span> <span class="node_name nodenH"><span  class="button ico_docu"></span>{{clientTree.authorizationTypeStr}}</span>
                                            <span class="button add animated fadeInUp" title="添加权限" ng-show="selcZ" data-nodrag ng-click="addAuthorization(clientTree.authorizationType,clientTree.authorizationTypeStr)" data-toggle="modal" data-target="#myModal" style="margin-right: 5px;"></span>
                                        </a>
                                        <ul ui-tree-nodes ng-model="clientTree.secAuthTypeList" class="level0" ng-class="{hidden: collapsed}">
                                            <li class="level1" ng-repeat="node in clientTree.secAuthTypeList" ui-tree-node>
                                                <a class="button level0 switch root_open" ng-if="node.visualAuthList && node.visualAuthList.length > 0" data-nodrag ng-click="toggle(this)"> <span class="button level0 switch" ng-class="{
                                                        'root_close':collapsed,
                                                        'root_open':!collapsed
                                                      }"></span></a>
                                                <a class="level1 AmarZ animated fadeInUp" ng-mouseover="selcA=true" ng-mouseleave="selcA=false">
                                                    <span class="button treeMN" ng-class="{
                                                        'ico_open': !collapsed,
                                                        'ico_close': collapsed
                                                      }"></span><span class="node_name nodenH"><span  class="button ico_docu"></span>{{node.secAuthorizationType}}</span>
                                                    <span class="button add animated fadeInUp" title="添加权限" ng-show="selcA" data-nodrag ng-click="addAuthorization(clientTree.authorizationType,clientTree.authorizationTypeStr,node.secAuthorizationType,node.secAuthorizationTypeTag)" data-toggle="modal" data-target="#myModal"
                                                        style="margin-right: 5px;"></span>
                                                </a>

                                                <ul ui-tree-nodes ng-model="node.visualAuthList" class="level1" ng-class="{hidden: collapsed}">
                                                    <li class="level2" ng-repeat="node in node.visualAuthList" ui-tree-node>
                                                        <a class="level1 AmarZ animated fadeInUp" ng-mouseover="selcz=true" ng-mouseleave="selcz=false">
                                                            <span class="button level2 switch heightz center_docu"></span> <span class="node_name nodenH"><span  class="button ico_docu"></span>{{node.name}}</span>
                                                            <span class="button edit animated fadeInUp" title="编辑权限" ng-show="selcz" data-nodrag ng-click="editAuthorization(node.id,node.name,node.authorizationType,node.secAuthorizationType,node.secAuthorizationTypeTag,node.level,node.tag)" data-toggle="modal"
                                                                data-target="#myModal"></span>
                                                            <span class="button remove animated fadeInUp" title="删除权限" ng-show="selcz" data-nodrag ng-click="delAuthorization(node.id)" style="margin-right: 5px;"></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <!-- <div class="swiper-pagination"></div> -->
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" id="closeModal">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{title}}</h4>
                </div>
                <form class="form-horizontal form-validation" id="AuthForm" novalidate>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-lg-4 control-label">一级分类名称<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <input ng-model="detail.authorizationType" id="authorizationType" type="text" class="form-control" placeholder="请填写一级分类名称" name="authorizationType" disabled="disabled" required>
                                <!-- <select ng-model="detail.authorizationType" id="table_authorizationType" class="form-control" ng-options="x.value as x.text for x in authorizationTypeArr" name="authorizationType" disabled="disabled" required>
                                    <option value="">请选择</option>
                                </select> -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label">二级分类名称<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <div angucomplete-alt id="secAuthorizationType" placeholder="" pause="100" selected-object="SecAuthorizationTypeSelect" remote-api-handler="searchSecAuthorizationType" search-fields="secAuthorizationType" title-field="secAuthorizationType" minlength="2"
                                    input-class="form-control form-control-small" input-name="secAuthorizationType" field-required="false" match-class="highlight" disable-input="editB">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label">权限名称<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <input ng-model="detail.name" id="visualauthorizationname" type="text" class="form-control" placeholder="请填写权限名称" name="visualauthorizationname" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label">菜单别名<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <input ng-model="detail.secAuthorizationTypeTag" id="secAuthorizationTypeTag" type="text" class="form-control" placeholder="请填写菜单别名" name="secAuthorizationTypeTag" ng-disabled="editB" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label">权限等级<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <select ng-model="detail.level" id="table_authorizationManagent_detail_level" class="form-control" ng-options="x.value as x.text for x in authorizationLevel" name="level" ng-disabled="editB" required>
                                            <option value="">请选择</option>
                                        </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label">Tag<span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <input ng-model="detail.tag" id="AuthorizationTag" type="text" class="form-control" onblur="this.value=this.value.replace(/\s+/g,'')" placeholder="请填写Tag" name="AuthorizationTag">

                            </div>
                            <div class="pull-left">
                                <a class="btn btn-info btn-addon m-l-xs btn-sm" id="addAuthorizationTag_addViaFn" ng-click="addTag($event)"><i class="fa fa-plus"></i>添加tag</a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-1 control-label"></label>
                            <div class="col-lg-10">
                                <span class="ui-select-bootstrap dropdown form-control matchz">
                                            <span ng-repeat="item in tagListData">
                                                <span style="margin-right: 3px; margin-bottom:3px;" class="ui-select-match-item btn btn-default btn-xs">
                                                <span class="close ui-select-match-close" ng-click="deleteTag(item.index)">&nbsp;×
                                            </span>
                                <span>{{item.tags}}</span>
                                </span>
                                </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="table_authorizationManagent_detail_cancel" type="button" class="btn btn-default" data-dismiss="modal" id="calceEditauthorization">取消</button>
                        <button ng-click="detail.click()" id="table_authorizationManagent_detail_click" type="button" class="btn btn-primary" id="saveEditauthorization">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 添加/编辑对话框 END -->

</div>